<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import api from '@/api'
import { Message } from '@arco-design/web-vue'
import UploadImage from '@/components/uploadImage.vue'

const $route = useRoute()
const $router = useRouter()

const keyword = ref('')
const collection_id = $route.query.collection_id
const currentDepartmentIndex = ref(0)
currentDepartmentIndex.value = $route.query.departmentIndex
const departmentList = ref([])
const page = ref(1)
const pageSize = ref(10)
const listTotal = ref(0)
const listData = ref([])
const listLoading = ref(false)
const formData = ref({
  course_ids: [],
  collection_id,
}) // 课程表单
const formVisible = ref(false) // 课程管理弹窗
const myCourseList = ref([])

const getListData = async (page) => {
  listLoading.value = true
  try {
    const res = await api.get(
      'course/departments/' +
        departmentList.value[currentDepartmentIndex.value].id +
        '/courses',
      {
        params: {
          page,
          pageSize: pageSize.value,
          collection_id,
          keyword: keyword.value,
        },
      }
    )
    listData.value = res.data.items
    listTotal.value = res.data.pageInfo.total
  } catch (error) {
    console.error(error)
  }
  listLoading.value = false
}

const getDepartmentList = async () => {
  try {
    const res = await api.get('system/departmentOptions')
    console.log('res', res)
    departmentList.value = res.data

    getListData(1)
  } catch (error) {
    console.error('error', error)
    return false
  }
}

const getMyCourseList = async () => {
  try {
    const res = await api.get('course/myCourseList')
    console.log('res', res)
    myCourseList.value = res.data
  } catch (error) {
    console.error('error', error)
    return false
  }
}

const changeDepartmentIndex = async (index) => {
  // $router.push('/course/setupDetails?departmentIndex=' + index + '&collection_id=' + collection_id)
  listData.value = []
  currentDepartmentIndex.value = index
  getListData(1)
}

const showFormData = async (record) => {
  // if (record) {
  //   formData.value.id = record.id
  //   formData.value.name = record.name
  //   formData.value.image = record.image
  //   formData.value.department_id = record.department_id
  // } else {
  //   resetFormData()
  // }
  formVisible.value = true
} // 显示课程表单

const formSubmit = async () => {
  console.log('formSubmit', formData.value)
  var obj = { ...formData.value }
  if (!obj.course_ids.length) {
    Message.error('请至少选择一个课程')
    return false
  }
  if (obj.id) {
    // try {
    //   const res = await api.post('course/collection/update/' + obj.id, obj)
    //   Message.success(res.message)
    //   getListData(1)
    //   resetFormData()
    // } catch (error) {
    //   console.error('error', error)
    //   return false
    // }
  } else {
    try {
      const res = await api.post(
        'course/departments/' +
          departmentList.value[currentDepartmentIndex.value].id +
          '/create',
        obj
      )
      Message.success(res.message)
      getListData(1)
      resetFormData()
    } catch (error) {
      console.error('error', error)
      return false
    }
  }
} // 提交课程表单

const resetFormData = async () => {
  formData.value = {
    course_ids: [],
    collection_id,
  }
}

const deleteItem = async (id) => {
  try {
    const res = await api.get(
      'course/departments/' +
        departmentList.value[currentDepartmentIndex.value].id +
        '/courses/' +
        id +
        '/del'
    )
    Message.success(res.message)
    getListData(1)
  } catch (error) {
    console.error('error', error)
    return false
  }
}

getDepartmentList()
getMyCourseList()
</script>

<template>
  <div class="page">
    <div class="header">
      <a-button @click="showFormData()"
                type="primary">新增课程</a-button>
    </div>

    <div class="talent_body">
      <div class="switch_category">
        <div class="switch_category_div">
          <div class="name">部门</div>
          <div class="category_list">
            <div @click="changeDepartmentIndex(index)"
                 class="category_cell"
                 :class="{active: currentDepartmentIndex==index}"
                 v-for="(item,index) in departmentList"
                 :key="index">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="talent_table">
        <a-table :data="listData">
          <template #columns>
            <a-table-column title="序号"
                            :width="60">
              <template #cell="{ rowIndex }"> {{ rowIndex + 1 }} </template>
            </a-table-column>
            <a-table-column title="课程名称"
                            data-index="course.name"></a-table-column>
            <a-table-column title="章节数"
                            data-index="course.count"></a-table-column>
            <a-table-column title="添加时间"
                            data-index="created_at"></a-table-column>
            <a-table-column title="操作"
                            align="center"
                            :width="300">
              <template #cell="{ record }">
                <a-space>
                  <a-popconfirm @ok="deleteItem(record.id)"
                                content="确认删除该数据吗?"
                                type="warning">
                    <a-button type="primary"
                              status="danger"
                              size="mini">删除</a-button>
                  </a-popconfirm>
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>

        <a-modal title="添加课程"
                 width="600px"
                 :on-before-ok="formSubmit"
                 v-model:visible="formVisible">
          <a-form>
            <a-form-item label="课程">
              <a-select v-model="formData.course_ids"
                        multiple
                        :style="{width:'400px'}"
                        placeholder="请选择课程">
                <a-option :value="item.id"
                          v-for="(item,index) in myCourseList"
                          :key="index">
                  {{ item.name }}
                </a-option>
              </a-select>
            </a-form-item>
          </a-form>
        </a-modal>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page {
  height: 100%;
}

.header {
  height: 52px;
  display: flex;
  justify-content: flex-end;
}

.talent_body {
  width: 100%;
  height: calc(100% - 52px);
  display: flex;
}

.switch_category {
  width: 200px;
  display: flex;
}

.switch_category_div {
  flex: 1;
  background: #ffffff;
  box-sizing: border-box;
  border-top: 1px solid #e5e6eb;
}

.switch_category_div:not(:last-child) {
  border-right: 1px solid #e5e6eb;
}

.switch_category_div .name {
  background-color: #f2f3f5;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.switch_category_div .category_list {
  height: calc(100% - 40px);
  overflow-y: auto;
}

.switch_category_div .category_cell {
  cursor: pointer;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.switch_category_div .active {
  background-color: #165dff;
  color: #fff;
}

.talent_table {
  width: calc(100% - 200px);
}
</style>